<template>
  <Card>
    <Tabs value="name1">
        <TabPane label="材料模板管理" @on-click="loadelectronicmaterialstemplatelist({})" name="name1">
          <Button class="new-btn-sty" @click="loadelectronicmaterialstemplate({})"><Icon type="md-add" /> 上传电子材料模板</Button>
          <Modal v-model="modalAdd" title="电子材料模板管理" width="700" cancel-text="关闭"
         @on-ok="ok(paramData2)" @on-cancel="modalEdit=false" ok-text="确定">
    <Form :model="paramData2" >
      <Row class="item1">
        <Col span="5" style="text-align: right" class="">id:</Col>
        <Col span="12" offset="1">
          <Input v-model="paramData2.id"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="5" style="text-align: right" class="">标题:</Col>
        <Col span="12" offset="1">
          <Input v-model="paramData2.title"></Input>
        </Col>
      </Row>
      <Row class="item1" style="height:auto;line-height:auto">
        <Col span="5" style="text-align: right" class="">内容:</Col>
        <Col span="12" offset="1">
          <Input v-model="paramData2.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
        </Col>
      </Row>
      <Row class="item1" style="height:auto;line-height:auto">
        <Col span="5" style="text-align: right" class="">出具部门:</Col>
        <Col span="12" offset="1">
          <Select v-model="paramData2.showdepartment" :autosize="{minRows: 2,maxRows: 5}">
            <Option v-for="item in showDepartmentList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="5" style="text-align: right" class="">材料标签:</Col>
        <Col span="12" offset="1">
          <Select v-model="paramData2.labelname" multiple style="width:260px">
            <Option v-for="item in labelList" :value="item.labelname" :key="item.labelname">{{ item.labelname }}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="5" style="text-align: right" class="">材料编码:</Col>
        <Col span="12" offset="1">
          <Select v-model="paramData2.codename" multiple style="width:260px">
            <Option v-for="item in codeList" :value="item.codename" :key="item.codename">{{ item.codename }}</Option>
          </Select>
        </Col>
      </Row>
          <Input v-model="paramData2.edit" v-show="show"></Input>
    </Form>
  </Modal>
        <Table border :columns="columns1" :data="datalist"></Table>
        </TabPane>
        <TabPane label="历史材料模板管理" @on-click="loadelectronicmaterialstemplatehistory({})" name="name2">
          <Table border :columns="columns2" :data="datalisthistory"></Table>
        </TabPane>
    </Tabs>
  <!-- <Button class="new-btn-sty" @click="loadelectronicmaterialstemplatehistory({})"> 历史材料模板浏览</Button>
  <Button class="new-btn-sty" @click="loadelectronicmaterialstemplatelist"> 材料模板浏览</Button> -->
    <Row v-if="loadData === true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
  </Card>
</template>

<script>

import {
  addElectronicmaterialstemplate,
  addmaterialstemplatehistory,
  deletematerialstemplate,
  loadCodeList,
  loadelectronicmaterialstemplatehistory,
  loadelectronicmaterialstemplateList,
  loadLabelList,
  updateElectronicmaterialstemplate
} from '@/api/eventlist'

export default {
  name: 'electronicmaterialstemplate',
  props: {
    labelArr: Object,
    codeArr: Object
  },
  data () {
    return {
      showlist: true,
      show: false,
      modalAdd: false,
      paramData2: {},
      datalist: [],
      datalisthistory: [],
      showhistory: false,
      loadData: true,
      codeList: [],
      labelList: [],
      showDepartmentList: [
        {
          value: '民政',
          label: '民政'
        },
        {
          value: '人力资源社会保障',
          label: '人力资源社会保障'
        },
        {
          value: '房产',
          label: '房产'
        },
        {
          value: '卫生健康',
          label: '卫生健康'
        },
        {
          value: '医保',
          label: '医保'
        },
        {
          value: '工会',
          label: '工会'
        },
        {
          value: '残联',
          label: '残联'
        },
        {
          value: '社区',
          label: '社区'
        }
      ],
      columns2: [
        {
          title: '序号',
          type: 'index'
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '模板内容',
          key: 'content'
        },
        {
          title: '出具部门',
          key: 'showdepartment'
        },
        {
          title: '材料标签',
          key: 'labelname'
        },
        {
          title: '材料编码',
          key: 'codename'
        },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '修改时间',
          key: 'update_time'
        },
        {
          title: '版本号',
          key: 'version'
        },
        {
          title: '修改历史',
          key: 'updateid'
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', backgroundColor: '#598ED1', borderColor: '#598ED1' },
                on: {
                  click: () => {
                    let edit = 0
                    this.loadelectronicmaterialstemplate(params.row, edit)
                  }
                }
              }, '编辑')
            )
            return h('div', temp)
          }
        }
      ],
      columns1: [
        {
          title: '序号',
          type: 'index'
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '模板内容',
          key: 'content'
        },
        {
          title: '出具部门',
          key: 'showdepartment'
        },
        {
          title: '材料标签',
          key: 'labelname'
        },
        {
          title: '材料编码',
          key: 'codename'
        },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', backgroundColor: '#598ED1', borderColor: '#598ED1' },
                on: {
                  click: () => {
                    let edit = 0
                    this.loadelectronicmaterialstemplate(params.row, edit)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除')
            )
            return h('div', temp)
          }
        }
      ]
    }
  },
  methods: {
    init (param) {
      loadelectronicmaterialstemplateList(param).then(res => {
        if (res.data.errcode === 0) {
          this.datalist = res.data.data
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取电子模板列表失败', desc: res.data.errmsg })
        }
      })
      this.loadelectronicmaterialstemplatehistory()
    },
    remove (item) {
      if (confirm('确定删除该条数据吗')) {
        deletematerialstemplate({ id: item.id }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({ title: '删除成功', desc: res.errmsg })
            this.init(this.params)
          } else {
            this.$Notice.error({ title: '删除失败', desc: res.errmsg })
          }
        })
      }
    },
    loadlabelList () {
      loadLabelList().then(res => {
        if (res.data.errcode === 0) {
          this.labelList = res.data.data
          this.value = res.data.data
          this.label = res.data.data
          this.loadData = false
        }
      })
    },
    loadcodeList () {
      loadCodeList().then(res => {
        if (res.data.errcode === 0) {
          this.codeList = res.data.data
          this.loadData = false
        }
      })
    },
    loadelectronicmaterialstemplatehistory () {
      loadelectronicmaterialstemplatehistory().then(res => {
        if (res.data.errcode === 0) {
          this.datalisthistory = res.data.data
          this.showhistory = true
          this.showlist = false
        }
      })
    },
    loadelectronicmaterialstemplatelist () {
      this.showhistory = false
      this.showlist = true
    },
    loadelectronicmaterialstemplate (item, edit) {
      this.modalAdd = true
      this.paramData2.id = item.id || null
      this.paramData2.title = item.title || ''
      this.paramData2.labelname = item.labelname || ''
      this.paramData2.codename = item.codename || ''
      this.paramData2.edit = edit
      this.paramData2.content = item.content || ''
      this.paramData2.showdepartment = item.showdepartment || ''
    },
    ok (param) {
      this.showhistory = false
      this.showlist = true
      param.labelname = this.paramData2.labelname.toString()
      param.codename = this.paramData2.codename.toString()
      if (param.edit === 0) {
        addmaterialstemplatehistory(param).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({ title: '成功', desc: '' })
            updateElectronicmaterialstemplate(param).then(res => {
              if (res.data.errcode === 0) {
                this.$Notice.success({ title: '成功', desc: '' })
              }
            })
            this.init(null)
          } else {
            this.$Notice.error({ title: '失败', desc: res.data.errmsg })
          }
        })
      } else {
        console.log(param)
        addElectronicmaterialstemplate(param).then(res => {
          console.log(res)
          if (res.data.errcode === 0) {
            this.$Notice.success({ title: '成功', desc: '' })
            this.init(null)
          } else {
            this.$Notice.error({ title: '失败', desc: res.data.errmsg })
          }
        })
      }
    }
  },
  mounted () {
    this.init(null)
    this.loadcodeList()
    this.loadlabelList()
  }
}
</script>

<style scoped>
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
  margin-top: 5px;
  margin-bottom: 5px;
}
.item1{
  height: 42px;
  line-height: 40px;
}
</style>
